<!-- 党员登高 -->
<template>
  <div>
    <van-nav-bar
      title="党员登高"
      left-arrow
      @click-left="$router.push('/')"
    />
    <div v-if="pageData.tip" class="noticePayment border-bottom-one-rem">
      <div>
        <img class="noticePayment_img" src="../../assets/smallBell.png" alt="">
        <span  class="textDiv">{{pageData.tip}}</span>
      </div>
      <div class="button" @click="goFill(pageData.url)">去填写</div>
    </div>
    <!-- 环形进度条 -->
    <circularProgress :pageData="pageData"></circularProgress>
    <!-- table -->
    <div style="padding:0 3.4rem">
      <noSencondLevelTable :tableData='tableData'></noSencondLevelTable>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/index.js'
import { turnHref, appendFeild } from '@/untils/untils.js'
import circularProgress from '../canvas/circularProgress'
import noSencondLevelTable from '../components/noSencondLevelTable'
export default {
  components: {circularProgress,noSencondLevelTable},
  data() {
  return {
      data:{
        "serviceName":"PersonalClimbplan",
        "methodName":"ClimbplanDetail",
        "usercode":"700246",
        roleid:'' 
      },
      pageData:{
        percent:'',
        blue:0,
        red:0
      },
      tableData:{
        thead:[
          {prop:'climbplanyear',label:'年份',width:'flex2'},
          {prop:'username',label:'姓名',width:'flex2'},
          {prop:'writetime',label:'填写时间',width:'flex2'},
          {prop:'content',label:'内容',width:'flex4'},
        ],
        tbody:[],
        isNeedDetails: true
      }
    };
  },
  created(){
    this.data.usercode = window.localStorage.getItem('usercode')
    this.data.roleid = window.localStorage.getItem('roleId')
    this.ClimbplanDetail()
  },
  methods: {
    ClimbplanDetail(){
      getUserInfo(this.data).then(res => {
        if (res.status == 1) {
          this.pageData = res.data
          this.tableData.tbody = appendFeild(res.data.list,'zRoute','/toHeightDetail')
        }
      })
    },
    goFill(url){
      turnHref(url)
    }
  }
}
</script>
<style scoped>
.textDiv{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  width: 220px;
  vertical-align:middle
}
.noticePayment{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  height: 44px;
  font-size: 2.8rem;
  color: #BB383E;
  width: 100%;
}
.noticePayment div{
  display: inline-block;
  
}
.noticePayment_img{
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: middle;
}
.button{
  padding: 4px 10px;
  background: #BB383E;
  color: #ffffff;
  border-radius: 3px;
}
</style>